<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>岗位匹配 - SimpleHire</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #6366f1;
            --primary-dark: #4f46e5;
            --secondary-color: #8b5cf6;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --light-bg: #f8fafc;
            --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --border-radius: 12px;
            --transition: all 0.3s ease;
        }
        
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .job-card {
            transition: var(--transition);
            border: none;
            box-shadow: var(--card-shadow);
            border-radius: var(--border-radius);
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .job-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.15);
        }
        
        .match-score {
            font-size: 1.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--success-color), var(--primary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .skill-tag {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 500;
            margin: 0.25rem;
            display: inline-block;
            transition: var(--transition);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .skill-tag:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        
        .stats-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            color: var(--primary-color);
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: var(--transition);
        }
        
        .stats-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.15);
        }
        
        .search-section {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius);
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: var(--card-shadow);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-briefcase-fill me-2"></i>SimpleHire
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/resume/analysis">简历分析</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/interview">AI面试</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/job-matching">岗位匹配</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/reports">报告中心</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown" sec:authorize="isAuthenticated()">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle me-1"></i>
                            <span sec:authentication="name">用户</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/profile">个人资料</a></li>
                            <li><a class="dropdown-item" href="/job-matching/manage">岗位管理</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <!-- 页面标题 -->
        <div class="row mb-4">
            <div class="col-12">
                <h1 class="display-6 mb-3">
                    <i class="bi bi-search me-3"></i>岗位匹配
                </h1>
                <p class="lead text-muted">找到最适合您的工作机会，AI智能分析简历与岗位的匹配度</p>
            </div>
        </div>

        <!-- 用户统计信息 -->
        <div class="row mb-4" th:if="${stats}">
            <div class="col-12">
                <div class="stats-card p-4">
                    <div class="row text-center">
                        <div class="col-md-3">
                            <h3 class="mb-1" th:text="${stats.totalMatches}">0</h3>
                            <small>总匹配次数</small>
                        </div>
                        <div class="col-md-3">
                            <h3 class="mb-1" th:text="${#numbers.formatDecimal(stats.averageScore, 1, 1)}">0.0</h3>
                            <small>平均匹配分数</small>
                        </div>
                        <div class="col-md-3">
                            <h3 class="mb-1" th:text="${#numbers.formatDecimal(stats.bestScore, 1, 1)}">0.0</h3>
                            <small>最高匹配分数</small>
                        </div>
                        <div class="col-md-3">
                            <h3 class="mb-1" th:text="${stats.highScoreMatches}">0</h3>
                            <small>高分匹配(≥80)</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 搜索区域 -->
        <div class="search-section">
            <h5 class="mb-3"><i class="bi bi-funnel me-2"></i>搜索岗位</h5>
            <form th:action="@{/job-matching/search}" method="get">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="title" class="form-label">岗位标题</label>
                        <input type="text" class="form-control" id="title" name="title" 
                               th:value="${searchTitle}" placeholder="如：Java开发工程师">
                    </div>
                    <div class="col-md-4">
                        <label for="company" class="form-label">公司名称</label>
                        <input type="text" class="form-control" id="company" name="company" 
                               th:value="${searchCompany}" placeholder="如：阿里巴巴">
                    </div>
                    <div class="col-md-4">
                        <label for="location" class="form-label">工作地点</label>
                        <input type="text" class="form-control" id="location" name="location" 
                               th:value="${searchLocation}" placeholder="如：北京">
                    </div>
                    <div class="col-md-3">
                        <label for="industry" class="form-label">行业</label>
                        <select class="form-select" id="industry" name="industry">
                            <option value="">不限</option>
                            <option th:each="industry : ${industries}" 
                                    th:value="${industry}" 
                                    th:text="${industry}"
                                    th:selected="${industry == searchIndustry}"></option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="experienceLevel" class="form-label">经验要求</label>
                        <select class="form-select" id="experienceLevel" name="experienceLevel">
                            <option value="">不限</option>
                            <option th:each="level : ${experienceLevels}" 
                                    th:value="${level}" 
                                    th:text="${level}"
                                    th:selected="${level == searchExperienceLevel}"></option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="educationLevel" class="form-label">学历要求</label>
                        <select class="form-select" id="educationLevel" name="educationLevel">
                            <option value="">不限</option>
                            <option th:each="level : ${educationLevels}" 
                                    th:value="${level}" 
                                    th:text="${level}"
                                    th:selected="${level == searchEducationLevel}"></option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="jobType" class="form-label">工作类型</label>
                        <select class="form-select" id="jobType" name="jobType">
                            <option value="">不限</option>
                            <option th:each="type : ${jobTypes}" 
                                    th:value="${type}" 
                                    th:text="${type}"
                                    th:selected="${type == searchJobType}"></option>
                        </select>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary me-2">
                            <i class="bi bi-search me-1"></i>搜索岗位
                        </button>
                        <a href="/job-matching" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-clockwise me-1"></i>重置
                        </a>
                        <a href="/job-matching/create" class="btn btn-success ms-2">
                            <i class="bi bi-plus-circle me-1"></i>发布岗位
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <!-- 消息提示 -->
        <div th:if="${success}" class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle me-2"></i>
            <span th:text="${success}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        
        <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle me-2"></i>
            <span th:text="${error}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>

        <!-- 岗位列表 -->
        <div class="row">
            <div class="col-lg-8">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">
                        <i class="bi bi-briefcase me-2"></i>
                        <span th:if="${searchPerformed}">搜索结果</span>
                        <span th:unless="${searchPerformed}">最新岗位</span>
                        <span class="badge bg-secondary ms-2" th:text="${#lists.size(jobs)}">0</span>
                    </h5>
                </div>

                <!-- 岗位卡片 -->
                <div th:if="${#lists.isEmpty(jobs)}" class="text-center py-5">
                    <i class="bi bi-inbox display-1 text-muted"></i>
                    <h5 class="text-muted mt-3">暂无岗位信息</h5>
                    <p class="text-muted">请尝试调整搜索条件或稍后再试</p>
                </div>

                <div th:each="job : ${jobs}" class="card job-card mb-3">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <h5 class="card-title mb-2">
                                    <a th:href="@{/job-matching/job/{id}(id=${job.id})}" 
                                       class="text-decoration-none" th:text="${job.title}">岗位标题</a>
                                </h5>
                                <h6 class="card-subtitle mb-2 text-muted">
                                    <i class="bi bi-building me-1"></i>
                                    <span th:text="${job.companyName}">公司名称</span>
                                    <span th:if="${job.workLocation}" class="ms-3">
                                        <i class="bi bi-geo-alt me-1"></i>
                                        <span th:text="${job.workLocation}">工作地点</span>
                                    </span>
                                </h6>
                                <p class="card-text text-muted" th:text="${#strings.abbreviate(job.description, 120)}">岗位描述...</p>
                                
                                <!-- 技能标签 -->
                                <div th:if="${job.requiredSkills}" class="mb-2">
                                    <span th:each="skill : ${job.requiredSkills}" 
                                          class="skill-tag" th:text="${skill}">技能</span>
                                </div>
                                
                                <div class="d-flex flex-wrap gap-3 text-muted small">
                                    <span th:if="${job.experienceLevel}">
                                        <i class="bi bi-clock me-1"></i>
                                        <span th:text="${job.experienceLevel}">经验要求</span>
                                    </span>
                                    <span th:if="${job.educationLevel}">
                                        <i class="bi bi-mortarboard me-1"></i>
                                        <span th:text="${job.educationLevel}">学历要求</span>
                                    </span>
                                    <span th:if="${job.salaryRange}">
                                        <i class="bi bi-currency-dollar me-1"></i>
                                        <span th:text="${job.salaryRange}">薪资范围</span>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-4 text-end">
                                <div class="mb-2">
                                    <small class="text-muted">
                                        发布时间：<span th:text="${#temporals.format(job.createdAt, 'MM-dd HH:mm')}">时间</span>
                                    </small>
                                </div>
                                <a th:href="@{/job-matching/job/{id}(id=${job.id})}" 
                                   class="btn btn-primary">
                                    <i class="bi bi-search me-1"></i>查看详情
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 侧边栏 -->
            <div class="col-lg-4">
                <!-- 匹配历史 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="bi bi-clock-history me-2"></i>最近匹配记录
                        </h6>
                    </div>
                    <div class="card-body">
                        <div th:if="${#lists.isEmpty(matchHistory)}" class="text-center text-muted py-3">
                            <i class="bi bi-inbox"></i>
                            <p class="mb-0 mt-2">暂无匹配记录</p>
                        </div>
                        
                        <div th:each="match : ${#lists.size(matchHistory) > 5 ? matchHistory.subList(0, 5) : matchHistory}" 
                             class="d-flex justify-content-between align-items-center py-2 border-bottom">
                            <div class="flex-grow-1">
                                <div class="fw-bold small" th:text="${match.jobDescription.title}">岗位标题</div>
                                <div class="text-muted small" th:text="${match.jobDescription.companyName}">公司名称</div>
                            </div>
                            <div class="text-end">
                                <div class="match-score" 
                                     th:classappend="${'text-' + (match.overallScore >= 80 ? 'success' : (match.overallScore >= 60 ? 'warning' : 'danger'))}"
                                     th:text="${#numbers.formatDecimal(match.overallScore, 1, 1)} + '%'">分数</div>
                                <a th:href="@{/job-matching/result/{id}(id=${match.id})}" 
                                   class="btn btn-sm btn-outline-primary">查看</a>
                            </div>
                        </div>
                        
                        <div th:if="${#lists.size(matchHistory) > 5}" class="text-center mt-3">
                            <a href="#" class="btn btn-sm btn-outline-secondary">查看更多</a>
                        </div>
                    </div>
                </div>

                <!-- 快速操作 -->
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="bi bi-lightning me-2"></i>快速操作
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a href="/job-matching/create" class="btn btn-success">
                                <i class="bi bi-plus-circle me-2"></i>发布新岗位
                            </a>
                            <a href="/job-matching/manage" class="btn btn-outline-primary">
                                <i class="bi bi-gear me-2"></i>管理我的岗位
                            </a>
                            <a href="/resume/analysis" class="btn btn-outline-secondary">
                                <i class="bi bi-file-earmark-text me-2"></i>分析简历
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>